<script setup lang="ts">
import { ref, computed } from "vue";
//import { dataLocal } from "@/store/store.ts";
import { Content, Meat } from "@/store/interface.ts";
import MenuTag from "@/components/block/menuTag.vue";
import Ifarm from "@/components/block/ifarm.vue";

const props = defineProps<{ data: Content; meat: Meat }>();

//准备默认值
//const content = dataLocal.single.content; //默认值




/**
 * 处理时间
 * 如果时间等于0，则关闭时间展示
 */
const formattedDate = computed(() => {
  if (props.data && props.data.post_date) {
    return props.data.post_date.split(" ")[0]; // 提取日期部分
  }
  return undefined;
});



//弹窗状态
const active = ref(false);
//弹窗按钮
const clickActive = () => {
  active.value = !active.value;
};
</script>

<template>
  <div
    class="lg:border flex justify-between items-center h-15 bg-header rounded-tl-xl rounded-tr-xl"
  >
    <h1 class="ml-6 text-base text-slate-700 font-semibold flex items-center">
      <span class="inline-block mr-3">
        {{ data?.post_password === "" ? "" : "密码保护：" }}

        {{ data?.post_title  }}
      </span>

      <MenuTag :data="meat.switch" />
      <p class="time ml-3" v-show="formattedDate !== '0'">
        {{ formattedDate  }}
      </p>
    </h1>
    <button
      type="button"
      class="apply-button mr-3 hidden lg:block"
      @click="clickActive"
      v-if="meat.site !== ''"
    >
      <Ifarm
        :clickActive="clickActive"
        :active="active"
        :site="meat.site"
        :title="data.post_title"
      />
    </button>
  </div>
</template>

<style scoped lang="less">
.content {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
//.apply-button {
//  color: #fff;
//  font-family: PingFang SC;
//  font-size: 14px;
//  font-style: normal;
//  font-weight: 600;
//  line-height: normal;
//  padding: 8px 18px;
//  text-align: center;
//  text-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.5);
//  text-transform: uppercase;
//}
//.apply-button {
//  background: linear-gradient(
//      180deg,
//      hsla(0, 0%, 100%, 0.8),
//      hsla(0, 0%, 100%, 0)
//    ),
//    #cb1b1b;
//  background-blend-mode: soft-light, normal;
//  border-radius: 6px;
//}

.time {
  font-size: 12px;
  color: rgb(51 65 85 / 0.6);
}
</style>
